<script setup>
import AuthenticatedLayout from '@/Layouts/AuthenticatedLayout.vue';
import InputError from '@/Components/InputError.vue';
import InputLabel from '@/Components/InputLabel.vue';
import PrimaryButton from '@/Components/PrimaryButton.vue';
import TextInput from '@/Components/TextInput.vue';
import { Head, useForm } from '@inertiajs/vue3';
import { ref } from 'vue';

const props = defineProps({
    user: {
        type: Object,
        required: true,
    },
});

const form = useForm({
    name: props.user.name,
    nickname: props.user.nickname || '',
    signature: props.user.signature || '',
    bio: props.user.bio || '',
    email: props.user.email || '',
    phone: props.user.phone || '',
    avatar: null,
});

const previewAvatar = ref(
    props.user.avatar 
        ? (props.user.avatar.startsWith('http') ? props.user.avatar : `/storage/${props.user.avatar}`)
        : null
);

const handleAvatarChange = (event) => {
    const file = event.target.files[0];
    if (file) {
        form.avatar = file;
        // 预览图片
        const reader = new FileReader();
        reader.onload = (e) => {
            previewAvatar.value = e.target.result;
        };
        reader.readAsDataURL(file);
    }
};

const submit = () => {
    form.put(route('profile.update'), {
        forceFormData: true,
        onSuccess: () => {
            form.reset('avatar');
        },
    });
};
</script>

<template>
    <AuthenticatedLayout>
        <Head title="个人中心" />

        <div class="max-w-4xl mx-auto">
            <!-- 个人资料表单卡片 -->
            <div class="bg-card text-card-foreground flex flex-col gap-6 rounded-xl border py-6 shadow-sm">
                <div class="px-6">
                    <h1 class="text-3xl font-bold mb-6">个人资料</h1>

                    <form @submit.prevent="submit" class="space-y-6">
                        <!-- 头像 -->
                        <div class="space-y-2">
                            <InputLabel for="avatar" value="头像" />
                            <div class="flex items-center space-x-6">
                                <img
                                    v-if="previewAvatar"
                                    :src="previewAvatar"
                                    alt="头像预览"
                                    class="h-24 w-24 rounded-full object-cover border-2 border-input"
                                />
                                <div v-else class="h-24 w-24 rounded-full bg-muted flex items-center justify-center border-2 border-input">
                                    <span class="text-muted-foreground text-sm">暂无头像</span>
                                </div>
                                <div>
                                    <label
                                        for="avatar"
                                        class="inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all border bg-background shadow-sm hover:bg-accent hover:text-accent-foreground h-9 px-4 py-2 cursor-pointer"
                                    >
                                        <svg class="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 9a2 2 0 012-2h.93a2 2 0 001.664-.89l.812-1.22A2 2 0 0110.07 4h3.86a2 2 0 011.664.89l.812 1.22A2 2 0 0018.07 7H19a2 2 0 012 2v9a2 2 0 01-2 2H5a2 2 0 01-2-2V9z" />
                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 13a3 3 0 11-6 0 3 3 0 016 0z" />
                                        </svg>
                                        选择图片
                                    </label>
                                    <input
                                        id="avatar"
                                        type="file"
                                        accept="image/*"
                                        @change="handleAvatarChange"
                                        class="hidden"
                                    />
                                    <InputError class="mt-2" :message="form.errors.avatar" />
                                    <p class="text-xs text-muted-foreground mt-2">支持 JPG、PNG 格式，建议尺寸 200x200 像素</p>
                                </div>
                            </div>
                        </div>

                        <!-- 用户名 -->
                        <div class="space-y-2">
                            <InputLabel for="name" value="用户名" />
                            <TextInput
                                id="name"
                                type="text"
                                class="mt-1 block w-full"
                                v-model="form.name"
                                required
                            />
                            <InputError class="mt-2" :message="form.errors.name" />
                        </div>

                        <!-- 昵称 -->
                        <div class="space-y-2">
                            <InputLabel for="nickname" value="昵称" />
                            <TextInput
                                id="nickname"
                                type="text"
                                class="mt-1 block w-full"
                                v-model="form.nickname"
                                placeholder="请输入昵称"
                            />
                            <InputError class="mt-2" :message="form.errors.nickname" />
                        </div>

                        <!-- 个性签名 -->
                        <div class="space-y-2">
                            <InputLabel for="signature" value="个性签名" />
                            <TextInput
                                id="signature"
                                type="text"
                                class="mt-1 block w-full"
                                v-model="form.signature"
                                placeholder="一句话介绍自己"
                            />
                            <InputError class="mt-2" :message="form.errors.signature" />
                        </div>

                        <!-- 简介 -->
                        <div class="space-y-2">
                            <InputLabel for="bio" value="简介" />
                            <textarea
                                id="bio"
                                class="w-full px-3 py-2 border border-input rounded-md bg-transparent text-sm placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-primary focus:ring-offset-2 resize-none"
                                v-model="form.bio"
                                rows="4"
                                placeholder="详细的个人介绍"
                            ></textarea>
                            <InputError class="mt-2" :message="form.errors.bio" />
                        </div>

                        <!-- 邮箱 -->
                        <div class="space-y-2">
                            <InputLabel for="email" value="邮箱" />
                            <TextInput
                                id="email"
                                type="email"
                                class="mt-1 block w-full"
                                v-model="form.email"
                                placeholder="example@email.com"
                            />
                            <InputError class="mt-2" :message="form.errors.email" />
                        </div>

                        <!-- 手机号 -->
                        <div class="space-y-2">
                            <InputLabel for="phone" value="手机号" />
                            <TextInput
                                id="phone"
                                type="tel"
                                class="mt-1 block w-full"
                                v-model="form.phone"
                                placeholder="13800138000"
                                maxlength="11"
                            />
                            <InputError class="mt-2" :message="form.errors.phone" />
                        </div>

                        <!-- 用户信息展示 -->
                        <div class="bg-muted border border-border rounded-lg p-4">
                            <h3 class="text-sm font-medium mb-2">账户信息</h3>
                            <div class="grid grid-cols-2 gap-4 text-sm">
                                <div>
                                    <span class="text-muted-foreground">经验值：</span>
                                    <span class="font-medium">{{ user.exp || 0 }}</span>
                                </div>
                                <div>
                                    <span class="text-muted-foreground">等级：</span>
                                    <span class="font-medium">Lv.{{ user.level || 1 }}</span>
                                </div>
                                <div>
                                    <span class="text-muted-foreground">注册时间：</span>
                                    <span class="font-medium">{{ new Date(user.created_at).toLocaleDateString('zh-CN') }}</span>
                                </div>
                            </div>
                        </div>

                        <div class="flex items-center justify-end pt-6 border-t">
                            <PrimaryButton :disabled="form.processing">
                                保存修改
                            </PrimaryButton>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </AuthenticatedLayout>
</template>

